<template>
  <div>
    <el-dialog
      :visible.sync="IsShow"
      width="1000px"
      title="提示"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="base-form_container">
        <el-form :rules="rules" :model="feedbackForm" ref="feedbackForm" label-width="140px" label-position="right">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="feedBackNumber" label="反馈ID">
                <el-input v-model="feedbackForm.feedBackNumber" disabled placeholder="请输入反馈ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="marketProjectFirst" label="营销名称">
                <el-select disabled v-model="feedbackForm.marketProjectFirst" placeholder="请选择营销项目名称">
                  <el-option
                    v-for="(item, index) in marketProjectFirstList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="productId" label="产品名称">
                <el-select disabled v-model="feedbackForm.productId" placeholder="请选择产品名称">
                  <el-option v-for="(item, index) in ProductList" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="marketProjectSecond" label="营销状态">
                <el-select disabled v-model="feedbackForm.marketProjectSecond" placeholder="请选择营销项目状态">
                  <el-option
                    v-for="(item, index) in marketProjectSecondList"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="versionNumber" label="版本号">
                <el-input disabled v-model="feedbackForm.versionNumber" placeholder="请输入产品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="userId" label="指派人">
                <el-select disabled v-model="feedbackForm.userId" placeholder="请选择指派人">
                  <el-option v-for="(item, index) in UserList" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item prop="title" label="标题">
              <el-input disabled v-model="feedbackForm.title" placeholder="请输入产品名称"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col>
              <div class="questionDesc"><span style="color: red">*</span>问题描述</div>
              <quill-editor disabled v-model="feedbackForm.problemDescribe" ref="notesQuillEditor"> </quill-editor>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="questionDesc"><span style="color: red">*</span>初步排查结果</div>

              <quill-editor disabled v-model="feedbackForm.excludeResult" ref="notesQuillEditor"> </quill-editor>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="serverRequestTag" label="是否是服务请求">
                <el-radio-group v-model="feedbackForm.serverRequestTag" disabled>
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false" :class="!feedbackForm.serverRequestTag ? 'is-checked' : ''">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="serverRequestNumber" label="服务请求编号">
                <el-input
                  disabled
                  v-model="feedbackForm.serverRequestNumber"
                  placeholder="请输入服务请求编号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="serverRequestTime" label="服务请求时间">
                <el-date-picker
                  disabled
                  v-model="feedbackForm.serverRequestTime"
                  type="date"
                  placeholder="请选择创建时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="influenceCategory" label="影响类别">
                <el-select disabled v-model="feedbackForm.influenceCategory" placeholder="请选择影响类别">
                  <el-option
                    v-for="(item, index) in influenceCategory"
                    :key="index"
                    :label="item.title"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item prop="expirationDate" label="截止日期">
              <el-date-picker
                disabled
                v-model="feedbackForm.expirationDate"
                type="date"
                placeholder="请选择截止日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col>
              <div class="questionDesc"><span style="color: red">*</span>影响描述</div>
              <quill-editor disabled v-model="feedbackForm.influenceDescribe" ref="notesQuillEditor"> </quill-editor>
            </el-col>
          </el-row>
          <div class="encLosure">
            <div class="label">附件</div>
            <div>
              <el-upload
                class="upload-demo"
                :action="fileUpload"
                :on-success="onFileSuccess"
                :on-error="onFileError"
                :on-remove="onFileRemove"
                :before-upload="beforeUpload"
                multiple
                :limit="3"
                :file-list="encLosureList"
                list-type="picture"
              >
                <el-button size="small" type="primary" style="margin-top: 6px">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">(50M以内)</div>
              </el-upload>
            </div>
          </div>
        </el-form>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="相关bug" name="first">
          <el-table
            :data="firstList"
            style="width: 100%"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{
              textAlign: 'center'
            }"
          >
            <el-table-column prop="id" label="BUG ID"> </el-table-column>
            <el-table-column prop="status" label="BUG 状态"> </el-table-column>
            <el-table-column prop="data" label="计划解决版本/日期"> </el-table-column>
            <el-table-column prop="verson" label="解决版本"> </el-table-column>
            <el-table-column prop="fix" label="解决方案"> </el-table-column>
            <el-table-column align="center" label="操作">
              <template>
                <!-- slot-scope="scope" -->
                <span>删除</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="相关需求" name="second">
          <el-table
            :data="secondList"
            style="width: 100%"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{
              textAlign: 'center'
            }"
          >
            <el-table-column prop="xuqiu" label="原始需求ID"> </el-table-column>
            <el-table-column prop="id" label="市场需求ID"> </el-table-column>
            <el-table-column prop="title" label="产品需求"> </el-table-column>
            <el-table-column prop="title" label="需求状态"> </el-table-column>
            <el-table-column prop="title" label="需求阶段"> </el-table-column>
            <el-table-column prop="title" label="计划版本"> </el-table-column>
            <el-table-column align="center" label="操作">
              <template>
                <!-- slot-scope="scope" -->
                <span>删除</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="相关反馈" name="third">
          <el-table
            :data="ThreeList"
            style="width: 100%"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{
              textAlign: 'center'
            }"
          >
            <el-table-column prop="id" label="反馈ID"> </el-table-column>
            <el-table-column prop="status" label="反馈状态"> </el-table-column>
            <el-table-column prop="fix" label="反馈解决方案"> </el-table-column>
            <el-table-column align="center" label="操作">
              <template>
                <!-- slot-scope="scope" -->
                <span>删除</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="相关任务" name="fourth">
          <el-table
            :data="FourList"
            style="width: 100%"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{
              textAlign: 'center'
            }"
          >
            <el-table-column prop="id" label="任务ID"> </el-table-column>
            <el-table-column prop="title" label="任务标题"> </el-table-column>
            <el-table-column prop="status" label="任务状态"> </el-table-column>
            <el-table-column prop="user" label="任务责任人"> </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="相关会议" name="five">
          <el-table
            :data="fiveList"
            style="width: 100%"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{
              textAlign: 'center'
            }"
          >
            <el-table-column prop="title" label="超期反馈会议主题"> </el-table-column>
            <el-table-column prop="cuoshi" label="会议措施"> </el-table-column>
            <el-table-column prop="zeren" label="主责任"> </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div style="margin-top: 20px; height: 30px">
        <el-button
          type="primary"
          @click="handleClose"
          style="
            width: 70px;
            height: 30px;
            background: #3579e0;
            border: 1px solid #3579e0;
            border-radius: 5px;
            color: #ffffff;
            line-height: 8px;
            float: right;
          "
          >关闭</el-button
        >
        <!-- <el-button
          type="primary"
          @click="OnoverTine('_productFlowId')"
          style="
            width: 100px;
            height: 30px;
            background: #3579e0;
            border: 1px solid #3579e0;
            border-radius: 5px;
            color: #ffffff;
            line-height: 8px;
            float: right;
            margin-right: 10px;
          "
          >严重超期</el-button
        > -->
      </div>
    </el-dialog>
    <OverTine ref="OverTine" />
  </div>
</template>

<script>
import Api from '@/api/setting/api.js'
import OverTine from './overTine.vue'
import { FormOptionSet } from '@/api/setting/service.js'
import { OverView } from '@/api/overView/service'
export default {
    name: '',
    props: {},
    components: {
        OverTine
    },
    data() {
        return {
            fileUpload: `${process.env.VUE_APP_BASE_API}${Api.fileUpload}`,
            IsShow: false,
            feedbackForm: {
                feedBackNumber: '',
                marketProjectFirst: '',
                productId: '',
                marketProjectSecond: '',
                versionNumber: '',
                userId: '',
                title: '',
                problemDescribe: '',
                excludeResult: '',
                serverRequestTag: '',
                serverRequestNumber: '',
                expirationDate: '',
                influenceCategory: '',
                serverRequestTime: '',
                influenceDescribe: ''
            },
            // 影响类别列表
            influenceCategory: [
                {
                    title: '影响现场生产',
                    value: 0
                },
                {
                    title: '影响验收',
                    value: 1
                },
                {
                    title: '影响回款',
                    value: 2
                },
                {
                    title: '影响不大',
                    value: 3
                }
            ],
            // 动态控制服务是否开启
            radio: 'false',

            // 产品列表
            ProductList: [],

            // 指派人列表
            UserList: [],

            // 营销项目名称列表
            marketProjectFirstList: [],

            // 营销项目状态列表
            marketProjectSecondList: [],

            // 反馈来源列表
            feedBackSourceList: [],

            // 问题类型列表
            problemTypeList: [],

            // 阶段列表
            stageList: [],
            childStageList: [],
            rules: {
                feedBackNumber: [{ required: true, message: ' ', trigger: 'change' }],
                marketProjectFirst: [{ required: true, message: ' ', trigger: 'change' }],
                productId: [{ required: true, message: ' ', trigger: 'change' }],
                marketProjectSecond: [{ required: true, message: ' ', trigger: 'change' }],
                versionNumber: [{ required: true, message: ' ', trigger: 'change' }],
                problemDescribe: [{ required: true, message: ' ', trigger: 'change' }],
                influenceCategory: [{ required: true, message: ' ', trigger: 'change' }]
            },
            type: '',
            title: '操作提示',
            mainFlowId: '',
            encLosureList: [],
            activeName: 'first',
            firstList: [
                {
                    id: '1001',
                    status: 'xxxxx',
                    data: '2021-02-12',
                    verson: 'xxxx',
                    fix: 'xxxxx'
                }
            ],
            secondList: [
                {
                    xuqiu: '原始需求',
                    id: '1001',
                    title: 'xxxxxxx'
                }
            ],
            ThreeList: [
                {
                    id: '000',
                    status: 'ggggg',
                    fix: 'dhshd'
                }
            ],
            FourList: [
                {
                    id: 'ddd',
                    title: 'dnc',
                    status: '研发',
                    user: '不会的'
                }
            ],
            fiveList: [
                {
                    title: 'dddddd',
                    cuoshi: 'jvhndosf',
                    zeren: 'jdfv'
                }
            ]
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
    /* 数据字典 */
        this.getProductList()
        this.getStageList()
        this.getChildStageList()
        // this.getMarketProjectFirstList('MARKETING_PROJECT_BIG') // 营销项目名称
        // this.getMarketProjectFirstList('SOURCE_FEEDBACK') // 反馈来源列表
        // this.getMarketProjectFirstList('PROBLEM_TYPES') // 问题类型列表
        this.getMarketProjectFirstList()
    },
    methods: {
    // 获取相关下拉列表(type)
        async getMarketProjectFirstList() {
            try {
                const result = await FormOptionSet.FormOptionSetGetAllAsync()
                if (result.success) {
                    this.buildTemplateData(result.data)
                    // console.log(result.data)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        buildTemplateData(_data) {
            this.problemTypeList = _data.problemTypeSets
            this.feedBackSourceList = _data.sourceFeedbackSets
            this.marketProjectFirstList = _data.marketProjects
        },
        // async getMarketProjectFirstList(type) {
        //     if (type == 'MARKETING_PROJECT_BIG') {
        //         try {
        //             const result = await OverView.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.marketProjectFirstList = result.data
        //                 console.log('M', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else if (type == 'SOURCE_FEEDBACK') {
        //         try {
        //             const result = await OverView.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.feedBackSourceList = result.data
        //                 console.log('S', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     } else {
        //         try {
        //             const result = await OverView.FormOptionGetListItemAsync({
        //                 type: type
        //             })
        //             if (result.success) {
        //                 this.problemTypeList = result.data
        //                 console.log('P', result.data)
        //             }
        //         } catch (err) {
        //             console.log(err)
        //         }
        //     }
        // },
        // 产品名称选择器 (选择改变指派人)

        async productionChange(_val) {
            // 根据产品ID获得指派人列表
            try {
                const result = await OverView.GetListItemAsync({ id: _val })
                if (result.success) {
                    this.UserList = result.data
                    // console.log('MM', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },
        async getChildStageList() {
            try {
                const result = await OverView.GetListChildrenAsync({ type: 'NAME' })
                if (result.success) {
                    this.childStageList = result.data
                    // console.log('JJ', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 获取所有阶段列表

        async getStageList() {
            try {
                const result = await OverView.GetStageListAsync({ type: 'NAME' })
                if (result.success) {
                    this.stageList = result.data
                    // console.log('JJ', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 获取所有产品信息
        async getProductList() {
            try {
                const result = await OverView.ProInsertAsync()
                if (result.success) {
                    this.ProductList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },
        show(_id) {
            this.IsShow = true
            this.mainFlowId = _id
            // console.log(_id)
            this.getCategory(_id)
        },
        async getCategory(_id) {
            try {
                const result = await OverView.FeedBackGetLoadByNumber({
                    id: _id
                })
                if (result.success) {
                    // console.log(result.data)
                    this.feedbackForm = result.data.feedBackLoadDto
                    // console.log(result.data.feedBackLoadDto.productId)
                    this.productionChange(this.feedbackForm.productId)
                    if (result.data.feedBackLoadDto.fileUrl) {
                        const list = result.data.feedBackLoadDto.fileUrl.split(',')
                        if (list.length > 0) {
                            for (const value of list) {
                                this.encLosureList.push({ url: value })
                            }
                        }
                    }
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                console.log(err)
                this.$message.error('服务器异常')
            }
        },
        // 重置
        resetForm() {
            this.encLosureList = []
            this.$nextTick(() => {
                this.$refs.feedbackForm.resetFields()
            })
        },
        beforeUpload(_file) {
            // 单位字节
            const limitSize = 50 * 1024 * 1024
            if (_file.size > limitSize) {
                this.$message.error('上传文件大小超出50M')
                return false
            }
            return true
        },
        onFileSuccess(_response, _file, _fileList) {
            console.log(_response, _file, _fileList)
            if (_response.success) {
                this.encLosureList.push({ url: _response.data })
            } else {
                this.$message.error(_response.message || '上传失败')
            }
        },
        onFileError() {
            this.$message.error('上传失败')
        },
        onFileRemove(_file, _fileList) {
            console.log(_file, _fileList)
            this.encLosureList = _fileList
        },
        handleClose() {
            this.IsShow = false
        },
        OnoverTine(_productFlowId) {
            this.$refs.OverTine.show(_productFlowId)
        }
    }
}
</script>
<style scoped lang="less">
.questionDesc {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-bottom: 8px;
  margin-top: 15px;
  text-align: center;
}
.base-form_container {
  overflow-y: auto;
  border: 1px solid #cad0d8;
  .custom_input {
    ::v-deep .el-form-item__content {
      width: 100px !important;
    }
    .custom_input_col {
      ::v-deep .el-form-item__content {
        margin-left: 85px !important;
      }
    }
  }
  .custom_row {
    height: auto !important;
    ::v-deep .el-form-item__content {
      margin-top: 15px !important;
      width: 800px !important;
    }
    ::v-deep .el-form-item__label {
      height: 80px !important;
    }
  }
  .detail-content {
    line-height: 40px !important;
    text-align: center;
    background: #eaecef;
  }
  .notes-history__content {
    margin-left: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    color: #333;
    .notes-history__content-title {
      line-height: 25px;
      .user-name {
        color: #0052cc;
      }
    }
    .notes-history__content-text {
      line-height: 20px;
      font-size: 12px;
      word-wrap: break-word;
    }
  }

  .encLosure {
    display: flex;
    .label {
      width: 140px;
      line-height: 40px !important;
      padding: 0 12px 0 0;
      text-align: right;
    }
    .upload-demo {
      display: flex;
      .el-upload__tip {
        line-height: 24px !important;
      }
    }
  }
  ::v-deep .el-form-item__content {
    line-height: 40px !important;
    margin-left: 170px !important;
  }
  ::v-deep .el-row {
    border-bottom: 1px solid #cad0d8;
    height: auto !important;
  }
  ::v-deep .el-form-item__label {
    background: #eaecef;
  }
  ::v-deep .el-form-item {
    margin-bottom: 0 !important;
  }
  ::v-deep .ql-toolbar {
    background: #c8cdd5 !important;
  }
  ::v-deep .ql-container {
    border: initial;
    border-bottom: 1px solid #ccc !important;
  }
}
::v-deep .el-upload-list__item {
  transition: initial;
}
.button {
  width: 138px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  border-radius: 15px;
  cursor: pointer;
  background: #3579e0;
  color: #ffffff;
  margin: 0;
  padding: 0;
  position: relative;
  left: 320px;
  top: 47px;
}
</style>
